<template>
	<view class="cart-page">
		<!-- 商品列表 -->
		<view class="cart-products">
			<checkbox-group @change="handleItemChange">
				<!-- 商品项 -->
				<view class="product-item" v-for="(item, index) in cartItems" :key="item.id">
					<view class="product-checkbox">
						<checkbox :value="item.id" :checked="selectList.includes(item.id)"></checkbox>
					</view>
					<view class="product-image">
						<image :src="item.image" mode="aspectFit" />
					</view>
					<view class="product-info">
						<view class="product-name">{{ item.name }}</view>
						<view class="product-price">￥{{ item.price }}</view>
						<view class="product-quantity">
							<button @click="() => decrement(item)">-</button>
							<text>{{ item.quantity }}</text>
							<button @click="() => increment(item)">+</button>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>

		<!-- 猜你喜欢 -->
		<view class="recommendations-title">
			<p>猜你喜欢</p>
		</view>
		<view class="recommendations">
			<view class="recommendation-item" v-for="(item, index) in recommendations" :key="index">
				<view class="recommendation-box" @click="itemClick(index)">
					<view class="recommendation-image">
						<image :src="item.image" mode="aspectFit" />
					</view>
					<view class="recommendation-text">
						<view class="recommendation-name">{{ item.name }}</view>
						<view class="recommendation-price">￥{{ item.price }}</view>
						<view class="gift-points">赠送积分</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 结算区域 -->
		<view class="checkout">
			<!-- 全选复选框 -->
			<view class="cart-header">
				<checkbox :checked="isAllSelected" @click="toggleSelectionGroup">
					全选
				</checkbox>
			</view>
			<view class="checkout-left">
				<view class="total-price">合计：￥{{ totalPrice }}</view>
			</view>
			<view class="checkout-right">
				<view class="checkout-button">
					<button @click="checkout">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		watchEffect
	} from 'vue';

	export default {
		setup() {
			const cartItems = ref([{
					id: 1,
					name: 'XXXX40 Pro 5G手机 珠光白, 8+256G',
					price: 6399,
					quantity: 1,
					image: '/static/product001.png',
					selected: false
				},
				{
					id: 2,
					name: 'PXX40 Pro 5G手机 深邃黑, 8+128G',
					price: 6588,
					quantity: 1,
					image: '/static/product003.png',
					selected: false
				}
				// ... 这里可以继续添加更多的商品数据
			]);

			const recommendations = ref([{
					id: 3,
					name: 'XX20e 大电池6.3英寸高清大屏',
					price: 1899,
					image: '/static/product005.png'
				},
				{
					id: 4,
					name: 'XX笔记本 XXBook 13',
					price: 5199,
					image: '/static/product002.png'
				},
				{
					id: 5,
					name: 'XX笔记本 XXBook 13',
					price: 5199,
					image: '/static/product004.png'
				},
				{
					id: 6,
					name: 'XX笔记本 XXBook 13',
					price: 5199,
					image: '/static/product001.png'
				}
				// ... 这里可以继续添加更多的推荐商品数据
			]);

			// 是否全选
			const isAllSelected = computed(() => {
				// 选中的数组 = 当前的列表
				return selectList.value.length == cartItems.value.length;
			});

			// 计算属性 totalPrice 依赖于 cartItems 数组中每个商品的 selected 状态
			const totalPrice = computed(() => {
				// 取出已选的数据
				const selectedProducts = cartItems.value.filter(item =>
					selectList.value.includes(item.id)
				);

				// 价格计算
				return selectedProducts.reduce(
					(sum, product) => sum + product.price * product.quantity,
					0
				);
			});

			// 已选id项
			const selectList = ref([]);

			// 商品选中状态改变
			const handleItemChange = e => {
				const {
					value
				} = e.detail;
				selectList.value = value;
			};

			// 商品数量增减逻辑
			const increment = item => {
				item.quantity++;
			};

			const decrement = item => {
				if (item.quantity > 1) item.quantity--;
			};

			// 全选
			const toggleSelectionGroup = () => {
				// 如果当前是全选
				if (isAllSelected.value) {
					selectList.value = [];
				} else {
					selectList.value = cartItems.value.map(v => v.id);
				}
			};

			// 结算逻辑
			// 结算逻辑
			const checkout = () => {
			  // 检查是否有商品被选中
			  if (selectList.value.length === 0) {
			    // 如果没有商品被选中，显示提示信息
			    uni.showToast({
			      title: '请先选择商品',
			      icon: 'none'
			    });
			  } else {
			    // 如果有商品被选中，执行结算流程
			    const selectedProducts = cartItems.value.filter(item => selectList.value.includes(item.id));
			    // 跳转到确认订单页面，并传递商品信息
			    uni.navigateTo({
			      url: '/pages/tabBar/sureorder/sureorder?products=' + JSON.stringify(selectedProducts), // 确保路径正确
			      events: {
			        // 用于接收从购物车页面传递过来的数据
			        acceptDataFromCart: function (data) {
			          // 这里的data就是selectedProducts
			          console.log('从购物车页面接收的数据：', data);
			        }
			      },
			      success: function () {
			        console.log('跳转成功');
			      },
			      fail: function (error) {
			        console.error('跳转失败', error);
			      }
			    });
			  }
			};

			// 猜你喜欢点击逻辑（示例）
			const itemClick = index => {
				console.log('推荐商品点击:', recommendations.value[index]);
			};

			return {
				cartItems,
				selectList,
				recommendations,
				isAllSelected,
				totalPrice,
				handleItemChange,
				toggleSelectionGroup,
				increment,
				decrement,
				checkout,
				itemClick
			};
		}
	};
</script>

<style scoped>
	.cart-page {
		padding: 20rpx;
		background-color: #f5f5f5;
		color: #333;
		font-family: Arial, sans-serif;
		padding-bottom: 120rpx;
	}

	.select-all {
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
	}

	.select-all /deep/ checkbox {
		margin-right: 8rpx;
	}

	.cart-products {
		background-color: #fff;
		border: 1rpx solid #e5e5e5;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 8rpx;
	}

	.gift-points {
		font-size: 20rpx;
		color: #fff;
		background-color: #ff0000;
		display: inline-block;
		/* padding: 2rpx 10rpx; */
		border-radius: 4rpx;
		line-height: 1.5;
		margin-top: 5rpx;
		margin-right: 230rpx;
	}

	.product-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.product-item:last-child,
	.recommendation-item:last-child {
		border-bottom: none;
	}

	.product-checkbox,
	.product-image {
		margin-right: 15rpx;
	}

	.product-image image,
	.recommendation-image image {
		width: 180rpx;
		height: 180rpx;
		object-fit: cover;
	}

	.product-info {
		flex-grow: 1;
	}

	.product-name {
		font-size: 26rpx;
		color: #000;
	}

	.product-price {
		margin-top: 45rpx;
		left: 0;
		font-size: 34rpx;
		color: #666;
	}

	.product-quantity {
		display: flex;
		align-items: center;
		margin-top: -50rpx;
		margin-left: 220rpx;
	}

	.recommendations-title {
		margin-bottom: 20rpx;
		color: #9a9a9a;
		;
	}

	.recommendations {
		height: 900rpx;
		background-color: #f5f5f5 !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0;
		background-color: #fff;
		border-radius: 4rpx;
		margin-bottom: 20rpx;
	}

	.recommendation-item {
		width: calc(50% - 10rpx);
		margin-bottom: 20rpx;
		/* height: 40%; */
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 4rpx;
		background-color: #ffffff;
	}

	.recommendation-box {
		width: 100%;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}

	.recommendation-image {
		/* width: 90%; */
		height: auto;
		margin-bottom: 10rpx;
	}

	.recommendation-text {
		text-align: center;
	}

	.recommendation-name {
		font-size: 26rpx;
		color: #000;
		margin-bottom: 5rpx;
	}

	.recommendation-price {
		font-size: 34rpx;
		margin-right: 230rpx;
		color: #666;
	}


	.product-quantity button {
		width: 30rpx;
		height: 60rpx;
		margin-bottom: 55rpx;
		border: 1rpx solid #ddd;
		background-color: #fff;
		color: #999;
		cursor: pointer;
		outline: none;
		margin: 0 10rpx;
		border-radius: 50%;
	}

	.product-quantity text {
		font-size: 14rpx;
	}

	.checkout {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e5e5e5;
		box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
		height: 200rpx;
	}

	.checkout-options {
		display: flex;
		align-items: center;
	}

	.checkout-options checkbox {
		margin-right: 40rpx;
	}

	.total-price {
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 150rpx;
	}

	.checkout-button button {
		padding: 10rpx 30rpx;
		margin-bottom: 90rpx;
		background-color: #e60012;
		color: #fff;
		border: none;
		border-radius: 4rpx;
		cursor: pointer;
		font-size: 30rpx;
	}

	.cart-header {
		margin-bottom: 75rpx;
	}

	.checkout-options {
		display: flex;
		align-items: center;
	}

	.checkout-options checkbox {
		margin-right: 10rpx;
	}

	.checkout-left {
		margin-bottom: 75rpx;
	}
</style>
